<template>
	<div id="goods">
		<!-- 搜索頁面 -->
		<!-- 顶部搜索 -->
		<sousuonav :classle="'icon-xiangzuojiantou'" :showle="false" :bgcolorA="'#fff'" :bgcolorB="'#f7f7f7'"
			:push="'/assort'" :color="'#000'" :textri="'搜索'" :title="'点击搜索商品，店铺名称'" @search="search">
		</sousuonav>

		<div class="conter">
			<div class="top">
				<h5>历史记录</h5>
				<span class="iconfont icon-lajixiang"></span>
			</div>
			<div class="list">
				<p>暂无搜索历史~</p>
			</div>
		</div>

		<div class="buttom">
			<div class="top">
				<h5>热门搜索</h5>
			</div>
			<ul class="list">
				<li v-for="(item,index) in list" :key="index" @click="search(item.keyword)">
					{{ item.keyword }}
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import {
		gitsearchfor,
		gitkeyword
	} from '@/api/home'
	import sousuonav from '@/components/topsousuonav.vue'
	export default {
		name: "goods_search",
		data() {
			return {
				list: [],
				Text: "",
			}
		},
		components: {
			sousuonav
		},
		created() {
			gitkeyword().then(res => {
				this.list = res.data.data;
			})
		},
		methods: {
			// 搜索事件
			// index = 搜索框文字
			search(index) {
				this.$router.push('/home/goods_search/search_result/' + index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#goods {
		width: 100vw;
		min-height: 100vh;
		background-color: #ffffff;
		padding-top: 50 * $width;

		.conter {
			width: 100%;
			min-height: 120 * $width;
			padding: 20 * $width 15 * $width 0;

			.top {
				display: flex;
				justify-content: space-between;

				h5 {
					color: #282828;
					font-size: 15 * $width;
				}
			}

			.list {
				width: 100%;
				display: flex;
				align-items: center;
				min-height: 76 * $width;

				p {
					width: 100%;
					color: #999999;
					text-align: center;
				}
			}
		}

		.buttom {
			width: 100%;
			min-height: 120 * $width;
			padding: 10 * $width 15 * $width 0;

			.top {
				line-height: 30 * $width;
			}

			.list {
				margin-top: 10 * $width;
				display: flex;
				flex-wrap: wrap;

				li {
					padding: 8 * $width 10 * $width;
					background-color: #f2f2f2;
					margin-right: 10 * $width;
					margin-bottom: 10 * $width;
					border-radius: 10 * $width;
				}
			}
		}
	}
</style>
